<template>
  <el-card class="body-bottom">
    <template #header>
      <div class="header">
        <span>{{ title }}</span>
      </div>
    </template>
    <el-row :gutter="12">
      <el-col :span="8" v-for="news in newsList">
        <div class="paper">
          <NuxtLink :to="news?.externalLink">
            <img :src="news?.thumbnail"  width="100%" height="220"/>
            <span>{{ news?.title }}</span>
          </NuxtLink>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">

const props =defineProps<{
  title: string,
  catKey: string,
}>();

const newsList = ref([
  {title: "人民日报", thumbnail: "/paper1.png"},
  {title: "光明日报", thumbnail: "/paper1.png"},
  {title: "参考消息", thumbnail: "/paper1.png"},
])
</script>
<style scoped>
.el-card {
  height: 300px;
}

.header {
  height: 45px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header span{
  padding: 10px;
  font-weight: bolder;
  border-bottom: 2px solid var(--main-background);
}

.paper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

</style>